<template>
  <div class="admin">
    <van-cell is-link class="top">
      <span style="font-weight:boder;padding-top:15px;">头像</span>
      <div class="user">
        <img :src="data.src" alt />
      </div>
    </van-cell>
    <van-cell is-link>
      <span style="font-weight:bolder">用户名</span>
      <span class="username">{{data.uname}}</span>
    </van-cell>
    <div class="id">账号绑定</div>
    <van-cell is-link>
      <span style="font-weight:border">
        <i class="tel-icon"></i>手机
      </span>
      <span class="tel">{{data.username}}</span>
    </van-cell>
    <div class="security">安全设置</div>
    <van-cell is-link>
      登录密码
      <span class="set">未设置</span>
    </van-cell>
    <van-button type="primary" class="btn" @click="login">{{flag?'退出登录':'登录'}}</van-button>
  </div>
</template>
<script>
export default {
  data: () => ({
    data: {
      username: "未登录",
      uname: "未登录",
      src: ""
    },
    flag: true
  }),
  created() {
    this.getuserinfos();
    this.isflag();
  },
  methods: {
    login() {
      localStorage.removeItem('user')
      this.$router.push("/mine/login");
    },
    getuserinfos() {
      if (localStorage.getItem("user")) {
        this.data = JSON.parse(localStorage.getItem("user"));
      }
      console.log(this.data);
    },
    isflag() {
      if (!localStorage.getItem("user")) {
        this.flag = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.admin {
  background: #eee;
  min-height: 667px;
  .top {
    .van-icon-arrow:before {
      vertical-align: -20px;
    }
  }
  .user {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-image: url(http://shadow.elemecdn.com/faas/h5/static/sprite.3ffb5d8.png);
    background-position: 0px 0px;
    background-size: 100%;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
  .van-cell__value--alone {
    display: flex;
    justify-content: space-between;
    color: #333;
  }
  .username,
  .tel {
    color: rgb(155, 155, 155);
  }
  .id,
  .security {
    font-size: 12px;
    color: rgb(155, 155, 155);
    padding: 10px;
  }
  .tel-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4188211353,3246472202&fm=26&gp=0.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    color: #0094ff;
    vertical-align: -4px;
  }
  .set {
    color: #0094ff;
  }
  .btn {
    border: 0;
    width: 100%;
    font-weight: bolder;
    font-size: 16px;
    margin-top: 15px;
  }
}
</style>